<!doctype html>
<html>

<head>
  <title>Line Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://chartjs.bootcss.com/samples/utils.js"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div style="width:75%;">
    <canvas id="canvas"></canvas>
  </div>
  <br>
  <br>
  <script>
    setTimeout(function() {
      location.reload();
    }, 6000);
    var dddd = []
    var id=[]
    $.getJSON('http://localhost:9999/db.json', data => {
      Object.keys(data).forEach(function (key) {
        dddd.push(parseFloat(data[key]))
        id.push(key)
      })

      console.log(dddd)

      var config = {
        type: 'line',
        data: {
          labels: id,
          datasets: [{
            label: 'My First dataset',
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            // data: [[1, 20], [2, 30], [3, 40]],
            data: dddd,
            fill: false,
          }]
        },
        options: {
          responsive: true,
          title: {
            display: true,
            text: 'Chart.js Line Chart'
          },
          tooltips: {
            mode: 'index',
            intersect: false,
          },
          hover: {
            mode: 'nearest',
            intersect: true
          },
          scales: {

          }
        }
      };

      var ctx = document.getElementById('canvas').getContext('2d');
      window.myLine = new Chart(ctx, config);
    })





  </script>
</body>

</html>